<!DOCTYPE HTML>
<!--
	二手电子乐园 - 产品详情页
	基于 Helios by HTML5 UP 模板改造
-->
<html>

<head>
	<title>产品详情 - 二手电子乐园</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
	<meta name="description" content="查看二手电子产品详细信息，包括产品图片、规格参数、价格和商家联系方式" />
	<link rel="stylesheet" href="assets/css/main.css" />
	<noscript>
		<link rel="stylesheet" href="assets/css/noscript.css" />
	</noscript>
	<style>
		[v-cloak] {
			display: none;
		}

		.product-gallery {
			margin-bottom: 2em;
		}

		.product-gallery .main-image {
			text-align: center;
			margin-bottom: 1em;
		}

		.product-gallery .main-image img {
			max-width: 100%;
			height: auto;
			border-radius: 8px;
		}

		.product-gallery .thumbnail-row {
			display: flex;
			gap: 10px;
			justify-content: center;
			flex-wrap: wrap;
		}

		.product-gallery .thumbnail {
			width: 80px;
			height: 80px;
			cursor: pointer;
			border: 2px solid transparent;
			border-radius: 4px;
			overflow: hidden;
		}

		.product-gallery .thumbnail.active {
			border-color: #4acaa8;
		}

		.product-gallery .thumbnail img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.product-info {
			background: #f8f9fa;
			padding: 2em;
			border-radius: 8px;
			margin-bottom: 2em;
		}

		.product-price {
			font-size: 2em;
			color: #e74c3c;
			font-weight: bold;
			margin-bottom: 1em;
		}

		.seller-info {
			background: #fff;
			padding: 1.5em;
			border-radius: 8px;
			border-left: 4px solid #4acaa8;
		}

		.contact-btn {
			background: #4acaa8;
			color: white;
			padding: 0.8em 1.5em;
			border: none;
			border-radius: 4px;
			cursor: pointer;
			font-size: 1em;
			margin-top: 1em;
		}

		.contact-btn:hover {
			background: #3a9d84;
		}

		.specs-table {
			width: 100%;
			border-collapse: collapse;
			margin-top: 1em;
		}

		.specs-table th,
		.specs-table td {
			padding: 0.8em;
			text-align: left;
			border-bottom: 1px solid #ddd;
		}

		.specs-table th {
			background-color: #f8f9fa;
			font-weight: bold;
		}
	</style>
</head>

<body class="is-preload" v-scope v-cloak>
	<div id="page-wrapper">
		<!-- Header Container -->
		<div id="header-container"></div>

		<!-- Main -->
		<div class="wrapper style1">
			<div class="container">
				<article id="main" class="special">
					<header>
						<h2>{{ product.title || '产品详情' }}</h2>
						<p>{{ product.description || '加载中...' }}</p>
					</header>

					<div class="row">
						<!-- 产品图片 -->
						<div class="col-8 col-12-mobile">
							<div class="product-gallery">
								<div class="main-image">
									<img :src="currentImage" :alt="product.title" />
								</div>
								<div class="thumbnail-row">
									<div v-for="(image, index) in productImages" :key="index" class="thumbnail"
										:class="{ active: currentImage === image }" @click="currentImage = image">
										<img :src="image" :alt="'产品图片 ' + (index + 1)" />
									</div>
								</div>
							</div>

							<!-- 产品详细描述 -->
							<section>
								<header>
									<h3>产品详情</h3>
								</header>
								<p>{{ product.detailedDescription || product.description }}</p>

								<!-- 产品规格 -->
								<h4>产品规格</h4>
								<table class="specs-table" v-if="product.specifications">
									<tr v-for="(value, key) in product.specifications" :key="key">
										<th>{{ key }}</th>
										<td>{{ value }}</td>
									</tr>
								</table>
							</section>
						</div>

						<!-- 产品信息和卖家信息 -->
						<div class="col-4 col-12-mobile">
							<div class="product-info">
								<div class="product-price">¥{{ product.price }}</div>
								<p><strong>成色：</strong>{{ product.condition || '九成新' }}</p>
								<p><strong>分类：</strong>{{ getCategoryName(product.category) }}</p>
								<p><strong>发布时间：</strong>{{ product.publishTime || '2024-01-15' }}</p>
							</div>

							<div class="seller-info">
								<h4>卖家信息</h4>
								<p><strong>姓名：</strong>{{ product.seller?.name || '加载中...' }}</p>
								<p><strong>联系电话：</strong>{{ product.seller?.phone || '加载中...' }}</p>
								<p><strong>所在地址：</strong>{{ product.seller?.location || '加载中...' }}</p>
								<button class="contact-btn" @click="showContactInfo">联系卖家</button>
								<p><small>注意：请通过平台提供的联系方式与卖家沟通，确保交易安全</small></p>
							</div>

							<!-- VIP提示 -->
							<div class="seller-info" style="margin-top: 1em; border-left-color: #f39c12;">
								<h4>发布商品</h4>
								<p>想要发布您的二手商品？</p>
								<a href="vip.html" class="button">了解VIP特权</a>
								<p><small>普通用户需要先登录并升级为VIP才能发布商品</small></p>
							</div>
						</div>
					</div>
				</article>
			</div>
		</div>

		<!-- Footer Container -->
		<div id="footer-container"></div>
	</div>

	<!-- Scripts -->
	<script src="utils/loader.js"></script>
	<script>
		// 等待所有脚本加载完成后初始化页面
		window.addEventListener('scriptsLoaded', function () {
			// 加载公共组件
			fetchHtml.fetchAll();

			// 初始化 petite-vue
			const { createApp } = PetiteVue;

			const appData = {
				// 数据
				product: {},
				currentImage: '',
				productImages: [],

				// 方法
				loadProduct() {
					const urlParams = new URLSearchParams(window.location.search);
					const productId = parseInt(urlParams.get('id'));

					if (!productId) {
						alert('产品ID无效');
						window.location.href = 'index.html';
						return;
					}

					// 从所有产品中查找
					const allProducts = [
						...(window.siteData.featuredProducts || []),
						...(window.siteData.recommendedProducts || [])
					];

					const foundProduct = allProducts.find(p => p.id === productId);

					if (foundProduct) {
						this.product = {
							...foundProduct,
							detailedDescription: foundProduct.description + ' 这是一款优质的二手电子产品，经过严格检测，品质有保障。',
							condition: '九成新',
							publishTime: '2024-01-15',
							specifications: this.getProductSpecs(foundProduct.category)
						};

						// 生成产品图片数组（5张图片）
						this.productImages = Array.from({ length: 5 }, (_, i) =>
							`https://picsum.photos/600/400?random=${foundProduct.id}${i + 1}`
						);
						this.currentImage = this.productImages[0];
					} else {
						alert('产品不存在');
						window.location.href = 'index.html';
					}
				},

				getProductSpecs(category) {
					const specs = {
						phones: {
							'屏幕尺寸': '6.1英寸',
							'存储容量': '256GB',
							'运行内存': '8GB',
							'电池容量': '3000mAh',
							'操作系统': 'iOS 15'
						},
						cameras: {
							'传感器': '全画幅CMOS',
							'有效像素': '2400万',
							'镜头卡口': 'RF卡口',
							'视频录制': '4K 60fps',
							'防抖功能': '机身5轴防抖'
						},
						digital: {
							'处理器': 'M1芯片',
							'内存': '16GB',
							'存储': '512GB SSD',
							'屏幕': '12.9英寸 Liquid Retina',
							'连接': 'Wi-Fi 6, 蓝牙5.0'
						},
						refrigerators: {
							'容量': '215升',
							'能效等级': '一级能效',
							'制冷方式': '风冷无霜',
							'尺寸': '60×55×180cm',
							'保修': '整机保修1年'
						}
					};
					return specs[category] || {};
				},

				getCategoryName(category) {
					const names = {
						phones: '二手手机',
						cameras: '二手相机',
						digital: '二手数码',
						refrigerators: '二手冰箱'
					};
					return names[category] || '其他';
				},

				showContactInfo() {
					if (!localStorage.getItem('isLogin')) {
						alert('请先登录后再查看联系方式');
						window.location.href = 'login.html';
						return;
					}
					alert(`联系电话：${this.product.seller.phone}\n请通过电话联系卖家进行交易沟通`);
				}
			};

			const app = createApp(appData);
			app.mount();

			// 调用初始化方法
			appData.loadProduct();
		});
	</script>
</body>

</html>